<template>
  <div class="dashboard-container">
    <div class="dashboard-editor-container">
      
    

      

      <el-row  :gutter="20">
        <!-- 左侧 -->
         <el-col :xs="6" :sm="6" :lg="6">
            <el-row >
              <el-col :xs="24" :sm="24" :lg="24">
                <div class="chart-wrapper" style="min-height:200px">
                 <PanelShow  :data="myData" :tips="tips1"></PanelShow>
                </div>
              </el-col>
             </el-row>
              <el-row >
              <el-col :xs="24" :sm="24" :lg="24">
                <div class="chart-wrapper" style="min-height:200px">
                 <PanelShow  :data="myData" :tips="tips2"></PanelShow>
                </div>
              </el-col>
             </el-row>
              <el-row >
              <el-col :xs="24" :sm="24" :lg="24">
                <div class="chart-wrapper" style="min-height:200px">
                  <PanelShow  :data="myData" :tips="tips3"></PanelShow>
                </div>
              </el-col>
             </el-row>
        </el-col>
        <!-- 右侧 -->
        <el-col :xs="18" :sm="18" :lg="18">
            <el-col :xs="24" :sm="24" :lg="12">
                <div class="chart-wrapper">
                  <right-one></right-one>
                </div>
            </el-col>
             <el-col :xs="24" :sm="24" :lg="12">
                <div class="chart-wrapper">
                  <right-two></right-two>
                </div>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="8">
                <div class="chart-wrapper">
                  <right-third></right-third>
                </div>
            </el-col>
             <el-col :xs="24" :sm="24" :lg="16">
                <div class="chart-wrapper">
                  <right-four></right-four>
                </div>
            </el-col>
        </el-col>
       
      </el-row>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import RightOne from "./dashboard/RightOne"
import RightTwo from "./dashboard/RightTwo"
import RightThird from "./dashboard/RightThird"
import RightFour from "./dashboard/RightFour"
import PanelShow from "./dashboard/PanelShow"

import { count } from '@/api/visits'

/**
 * 记录访问，只有页面刷新或者第一次加载才会记录
 */
count().then(res => {})

export default {
  name: 'Dashboard',
   data(){
    return{
      tips1:{
        name:"任务提示",
        icon:"el-icon-date"
      },
      tips2:{
        name:"风险提示",
        icon:"el-icon-umbrella"
      },
       tips3:{
        name:"通知信息",
        icon:"el-icon-message"
      },
      myData:[
          {
              name: '贷后检查任务10件',
              children: [{
                  name: 'XX资产分类申请',
                  time:"2018-11-09"
              }]
          },
          {
            name: '贷后检查任务5件',
            children: [
                {
                    name: 'XX资产分类申请',
                    time:"2018-11-09"
                },
                {
                    name: 'XX资产分类申请',
                    time:"2018-11-09"
                }
              ]

          }
      ]


    }
  },
  components: {
    RightOne,
    RightTwo,
    RightThird,
    RightFour,
    PanelShow
     },
  computed: {
    ...mapGetters([
      'roles'
    ])
  },
 
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .dashboard-editor-container {
    padding: 18px 22px 22px 22px;
    background-color: rgb(240, 242, 245);
    .chart-wrapper {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;
    }
  }
</style>
